<template>
	<div class="main">
		<el-card shadow="never" class="card">
			<el-upload ref="upload" action="/lejuAdmin/material/uploadFileOssSave" :headers="headers"
				:on-success="uploadSuccess">
			
			
				<el-button type="primary" size="small" >点击上传素材</el-button>
				<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
				<!-- <img :src="" alt=""> -->
			</el-upload>
			
			</el-card>
			<!-- 素材照片展示区 -->
			<div class="img-box">
				
					<el-card >
					 <el-col  class="img-item"  style="width:180px;height: 300px;" v-for="(item,index) in form" :key="item.id">
					   <el-card shadow="always">
						   <div class="img-text">创建时间:{{item.createTime}}</div>
					     <img :src="item.ossUrl" alt="" style="width: 150px;height: 250px;">
						 <el-button type="danger" size="mini"  class="removeBtn" @click="removeBtn(item.id)">删除</el-button>
					   </el-card>
					 </el-col>
					  </el-card>
				
				
			</div>
			<div class="block">
			   
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="page.currentPage"
			      :page-sizes="page.pageSizes"
			      :page-size="100"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="page.total">
			    </el-pagination>
			  </div>
			<!-- 底部 暂时不写-->
			<!-- <div class="bottom">
				<div class="bottom-item1">
					<div> Element </div>
					<div></div>
					<div></div>
				</div>
				<div></div>
			</div> -->
		
			
		

	</div>
</template>

<script>
	import{
		upImgApi
	}from "@/api/upImg.js"
	import {
		getToken
	} from "@/utils/myAuth.js"
	import{
		findMaterialByPage,
		delMaterial
	}from "@/api/content/material.js"
	export default{
		data(){
			const token = getToken()
			return{
				forms:{
					coverImg:""
				},
				headers: {
					token: token
				}, //上川文件的请求头
				form:[],
				// 分页
				page:{
					currentPage:1,
					pageSizes:[10, 15, 20, 25],
					total:0,
					currentpage:1,
					pageSize:10
				},
				 currentPage1: 5,
				        currentPage2: 5,
				        currentPage3: 5,
				        currentPage4: 4
			}
		},
		methods:{
			// 上传图片
			uploadSuccess(res){
				console.log(res)
				if(res.success ){
					this.$refs.upload.clearFiles()
				this.getMaterial()
					
				}else{
					this.$message.error("上传图片失败,请检查网络")
				}
			},
			// 获取素材列表
			getMaterial(){
				findMaterialByPage(this.page.currentpage,this.page.pageSize,this.form).then(res=>{
					console.log(res)
					this.form = res.data.rows
					this.page.total = res.data.total
				})
			},
			// 删除
			removeBtn(val){
				 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          delMaterial(val).then(res=>{
							 
							  if(res.success == true){
								  this.$message.success("删除成功")
								  this.getMaterial()
							  }else{
								  this.$message.error("删除失败,请检查网络设置")
							  }
						  })
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
			},
			// 分页
			  handleSizeChange(val) {
			       
					this.page.pageSize =  val
					this.getMaterial()
			      },
			      handleCurrentChange(val) {
			       
					this.page.currentpage = val
					this.getMaterial()
			      }
		},
		created(){
			this.getMaterial()
		},
	}
</script>

<style scoped="scoped" lang="scss">
	body,html{
		background-color: #F0F2F5;
	}
	.main{
		.card{
			margin: 40px auto 20px auto;
		}
	}
	.img-box{
		padding: 10px;
		.img-item{
			margin-left:5px;
			margin-bottom: 50px;
			.removeBtn{
				margin-left: 50px;
				margin-top: 10px;	
			}
			.img-text{
				font-size: 12px;
			}
		}
		
	}
	// 底部
	
</style>
